<!--  -->
<template>
  <div class="background-region">
    <div class="staff-header">
      <div class="staff-header-info">
        <div>
          <img
            src="https://yygh-zjut.oss-cn-hangzhou.aliyuncs.com/IS-system/xzh.png"
          />
        </div>
        <div>徐振华<i class="el-icon-male"></i></div>
        <div>副经理</div>
      </div>
    </div>
    <div class="staff-body">
      <div class="staff-body-left">
        <el-row>
          <el-col
            :span="24"
            style="margin: 25px 0 0 15px; font-size: 22.5px; font-weight: 600"
            >基本信息</el-col
          >
        </el-row>

        <el-row class="staff-info">
          <el-col :span="6" class="staff-info-label">职工号:</el-col>
          <el-col :span="18">202003150624</el-col>
        </el-row>
        <el-row class="staff-info">
          <el-col :span="6" class="staff-info-label">姓名:</el-col>
          <el-col :span="18">徐振华</el-col>
        </el-row>
        <el-row class="staff-info">
          <el-col :span="6" class="staff-info-label">职位:</el-col>
          <el-col :span="18">副经理</el-col>
        </el-row>
        <el-row class="staff-info">
          <el-col :span="6" class="staff-info-label">电话:</el-col>
          <el-col :span="18">18767175883</el-col>
        </el-row>
        <el-row class="staff-info">
          <el-col :span="6" class="staff-info-label">电子邮件:</el-col>
          <el-col :span="18">718457605@qq.com</el-col>
        </el-row>
        <el-row class="staff-info">
          <el-col :span="6" class="staff-info-label">所属门店:</el-col>
          <el-col :span="18">门店 1</el-col>
        </el-row>
      </div>
      <div class="staff-body-mid">
        <el-row>
          <el-col
            :span="24"
            style="margin: 25px 0 0 15px; font-size: 22.5px; font-weight: 600"
            >偏好信息</el-col
          >
        </el-row>
        <el-row class="staff-info">
          <el-col :span="24" class="staff-info-label">工作日偏好:</el-col>
        </el-row>
        <div>
          <el-tag>周一</el-tag>
          <el-tag>周五</el-tag>
        </div>
        <el-row class="staff-info">
          <el-col :span="24" class="staff-info-label">工作时间偏好:</el-col>
        </el-row>
        <div>
          <el-tag>14:00-16:00</el-tag>
        </div>
        <el-row class="staff-info">
          <el-col :span="24" class="staff-info-label">班次时长偏好:</el-col>
        </el-row>
        <div>
          <el-tag>4h</el-tag>
        </div>
        <!-- <div style="position: relative">
          <el-empty
            description="未设置偏好"
            style="width:350px;height300px"
          ></el-empty>
        </div> -->
      </div>
      <div class="staff-body-right">
        <el-row>
          <el-col
            :span="24"
            style="margin: 25px 0 0 15px; font-size: 22.5px; font-weight: 600"
            >待结业务</el-col
          >
        </el-row>
        <div
          style="margin: 20px 15px; font-size: 15px; color: rgba(0, 0, 0, 0.5)"
        >
          其所提交的<el-tag style="margin: 0 10px">申请调班</el-tag
          >请求正在等待处理...
        </div>
        <!-- <div style="position: relative">
          <el-empty
            description="无待办任务"
            style="width:350px;height300px"
          ></el-empty>
        </div> -->
        <div class="block" style="position: absolute; top: 40%; left: 10%">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      staffId: "",
      activities: [
        {
          content: "等待通过审核",
          //   timestamp: "2018-04-03 20:46",
          color: "rgb(209, 216, 224)",
          icon: "el-icon-loading",
          size: "large",
        },
        {
          content: "等待门店经理审核",
          //   timestamp: "2018-04-03 20:46",
          size: "large",
          color: "rgb(254, 211, 48)",
          icon: "el-icon-loading",
        },
        {
          content: "提交调班申请",
          timestamp: "2023-04-01 10:30",
          color: "#0bbd87",
          icon: "el-icon-check",
          size: "large",
        },
      ],
    };
  },

  components: {},

  created() {
    if (this.$route.params && this.$route.params.staffId) {
      this.staffId = this.$route.params.staffId;
    }
  },

  mounted() {},

  methods: {},
};
</script>
<style scoped>
.background-region {
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  display: flex;
  flex-flow: column;
}
.staff-header {
  margin: auto;
  margin-top: 15px;
  width: 90%;
  height: 175px;
  background: rgba(255, 255, 255, 1);
  border-radius: 30px;
  position: relative;
}
.staff-header-info {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

.staff-header-info img {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.staff-header-info > div:nth-child(2) {
  font-size: 25px;
}

.staff-header-info > div:nth-child(2) i {
  color: #3a3ef4;
}

.staff-header-info > div:nth-child(3) {
  font-size: 15px;
  color: gray;
}

.staff-body {
  display: flex;
  flex-flow: row;
  width: 90%;
  margin: auto;
  margin-top: 25px;
  border-radius: 30px;
}

.staff-body-left {
  flex: 1;
  height: 400px;
  background: rgba(255, 255, 255, 1);
  border-radius: 30px;
}

.staff-info {
  margin: 25px 15px;
  font-size: 15px;
}

.staff-info-label {
  color: rgba(0, 0, 0, 0.5);
}

.staff-body-mid {
  flex: 1;
  height: 400px;
  background: rgba(255, 255, 255, 1);
  border-radius: 30px;
  margin: 0 30px;
}

.el-tag {
  margin: 0px 10px;
}

.staff-body-right {
  flex: 1;
  height: 400px;
  background: rgba(255, 255, 255, 1);
  border-radius: 30px;

  position: relative;
}
</style>
